let layer = layui.layer;
let form = layui.form;

// =================== 获取文章类别数据 ====================
getArticleCate();
function getArticleCate() {
  axios.get("/my/article/cates").then((res) => {
    // console.log(res);

    // 来遍历data数组，生成tr td结构
    let newArr = res.data.data.map((item) => {
      return `
      <tr>
        <td>${item.name}</td>
        <td>${item.alias}</td>
        <td>
          <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${item.Id}">编辑</button>
          <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id="${item.Id}">删除</button>
        </td>
      </tr>
    `;
    });

    $("#tbody").html(newArr.join(""));
  });
}

// =================== 添加类别功能 ===================
let indexAddForm; // index表示添加类别弹出层的索引
let addFormStr = `<form id="addForm" class="layui-form">
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>`;

$("#btnAddCate").on("click", function () {
  // 弹出框
  indexAddForm = layer.open({
    content: addFormStr, // 内容
    type: 1, // 页面层
    title: "添加文章类别", // 标题
    area: ["500px", "250px"], // 定宽高
  });
});

// =================== 添加分类功能 - 发送ajax请求 ===================

// 表单的submit事件注册写法有问题 ==> 由于form表单是动态创建的，所以以下不对，需要使用事件委托
/* $("#addForm").on("submit", function (e) {
  e.preventDefault();
  alert(1);
}); */

// 需要使用事件委托 写法
$("body").on("submit", "#addForm", function (e) {
  e.preventDefault();

  // 收集表单数据 ==> 提交
  let data = $(this).serialize();

  axios.post("/my/article/addcates", data).then((res) => {
    // console.log(res);

    if (res.data.status !== 0) {
      return layer.msg(res.data.message);
    }

    // 新增成功之后，还要做的事情
    // 1. 关闭弹出层
    layer.close(indexAddForm);

    // 2. 重新获取所有的分类渲染展示到页面中
    getArticleCate();

    layer.msg("新增文章类别成功");
  });
});

// 编辑功能
let indexEditForm;
//  编辑按钮是动态创建的，需要注册事件委托

let editFormStr = `
  <form id="editForm" class="layui-form" lay-filter="editForm">
        <!-- 存id -->
        <div class="layui-form-item layui-hide">
          <label class="layui-form-label">分类名称Id</label>
          <div class="layui-input-block">
            <input type="text" name="Id" required lay-verify="required" placeholder="请输入Id" autocomplete="off"
              class="layui-input">
          </div>
        </div>

        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
          </div>
        </div>
      </form>
`;

$("#tbody").on("click", ".btn_edit", function () {
  // 获取到当前按钮上的自定义属性 data-id的值
  let Id = $(this).attr("data-id");
  // console.log(Id);

  // /my/article/cates/:id ==> :id 直接换成对应id的值
  axios.get("/my/article/cates/" + Id).then((res) => {
    // console.log(res);

    // 获取到数据，将其填充到表单中

    //给表单赋值
    // editForm 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
    form.val("editForm", res.data.data);
  });

  // 编辑弹出框
  indexEditForm = layer.open({
    content: editFormStr, // 内容
    type: 1, // 页面层
    title: "修改文章类别", // 标题
    area: ["500px", "250px"], // 定宽高
  });
});

// 更新
$("body").on("submit", "#editForm", function (e) {
  e.preventDefault();

  let data = $(this).serialize();

  console.log(data);

  axios.post("/my/article/updatecate", data).then((res) => {
    console.log(res);

    if (res.data.status !== 0) {
      return layer.msg(res.data.message);
    }

    // 更新分类信息成功！做的事情
    // 1. 关闭编辑弹出层
    layer.close(indexEditForm);

    // 2. 重新ajax获取数据
    getArticleCate();

    // 3. 提示
    layer.msg("更新分类信息成功！");
  });
});

// 删除
$("#tbody").on("click", ".btn_delete", function () {
  let id = $(this).attr("data-id");

  axios.get("/my/article/deletecate/" + id).then((res) => {
    // console.log(res);

    if (res.data.status !== 0) {
      return layer.msg(res.data.message);
    }

    // 成功
    // 提示
    layer.msg(res.data.message);

    // ajax获取数据渲染
    getArticleCate();
  });
});
